<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="../StaticFiles/element-plus-2.9.1/index.css" rel="stylesheet">
  <link href="../StaticFiles/nprogress/nprogress.min.css" rel="stylesheet">
  <link href="../styles/vue-page-common.css" rel="stylesheet">
  <script src="../Scripts/pollyfills/Array.prototype.flat.js"></script>
  <script src="../Scripts/pollyfills/ResizeObserver.js"></script>
  <script src="../StaticFiles/vue3/vue.global.prod.js"></script>
  <script src="../StaticFiles/element-plus-2.9.1/index.full.min.js"></script>
  <script src="../StaticFiles/element-plus-2.9.1/icons-vue.js"></script>
  <script src="../StaticFiles/element-plus-2.9.1/zh-cn.min.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/lodash.min.js"></script>
  <script src="../Scripts/datav-vue3.umd.js"></script>
  <title>DataV-Vue3测试</title>
  <style>
    html {
      background-image: url(../images/bg.jpg);
      color: #fff;
    }

    .el-form-item__label {
      color: #fff;
    }

    .el-form-item {
      margin-bottom: 15px;
    }

    .chart-title {
      text-align: center;
      color: #fff;
      padding-top: 5px;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="app">
    <div style="padding:0 5px;">
      <!-- 看板标题组件 -->
      <vue3-board-header :title="'DataV-Vue3测试'"></vue3-board-header>
      <el-form :inline="true" :model="dataObj.queryInfo" ref="queryInfoRef" :label-position="'left'"
        style="margin:5px 0 0 5px;">
        <el-form-item label="主制分厂:">
          <el-select v-model="dataObj.queryInfo.factoryid" placeholder="请选择" style="width: 180px;">
            <el-option v-for="f in dataObj.factoryList" :key="f.factoryid" :label="f.factoryname" :value="f.factoryid">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :icon="'Search'" size="default" @click="handleBtnSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10">
        <el-col :span="12">
          <border-box-10>
            <div class="chart-title">排产计划变更率统计</div>
            <div :style="{height:dataObj.chartHeight + 'px'}" id="changeRateChart"></div>
          </border-box-10>
        </el-col>
        <el-col :span="12">
          <border-box-10>
            <div class="chart-title">模块2</div>
            <div :style="{height:dataObj.chartHeight + 'px'}" id="chart2"></div>
          </border-box-10>
        </el-col>
      </el-row>

      <el-dialog :title="dataObj.chartDetail.queryInfo.title" :width="'98%'" :top="'10px'" height="1000" center
        v-model="dataObj.chartDetail.dialogVisiable">
        <el-table :data="dataObj.chartDetail.dataList" stripe border show-overflow-tooltip
          v-loading.fullscreen.lock="dataObj.loading" :element-loading-text="dataObj.loadingText"
          element-loading-background="rgba(0,0,0,0.8)">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="主制厂" prop="factoryname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="中心" prop="workcentername" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="单元" prop="teamname" width="100" show-overflow-tooltip></el-table-column>、
          <el-table-column label="修改人" v-if="dataObj.seriesName !== '排产工序数'" prop="fullname" width="100">
          </el-table-column>
          <el-table-column label="修改时间" v-if="dataObj.seriesName !== '排产工序数'" prop="updatedate" width="170"
            :formatter="replaceDate" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="派工时间" prop="createdate" width="170" :formatter="replaceDate" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="型别" prop="familylistnames" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="零件号" prop="productname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="订单号" prop="mfgordername" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="批次号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="工序名称" prop="workflowstepname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="计划开始时间" v-if="dataObj.seriesName === '排产工序数'" prop="starttime" width="170"
            :formatter="replaceDate" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="计划完成时间" v-if="dataObj.seriesName === '排产工序数'" prop="endtime" width="170"
            :formatter="replaceDate" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="工艺路线" prop="workflowname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="工艺版本" prop="workflowrevision" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="primary" :icon="'Download'" size="small" @click="exportChartDetailData">导出</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页注意事项：
          如果传入了 page-size，且布局包含 page-size 选择器（即 layout 包含 sizes），
          必须监听 page-size 变更的事件（@update:page-size），否则分页大小的变化将不起作用。
        -->
        <el-pagination style="margin-top: 5px;" layout="prev,pager,next,jumper,total"
          :page-size="dataObj.chartDetail.queryInfo.pageSize" :current-page="dataObj.chartDetail.queryInfo.currentPage"
          :total="dataObj.chartDetail.total" @update:current-page="handleDetailCurrentChange">
        </el-pagination>
      </el-dialog>
    </div>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="module">
    import Vue3BoardHeader from '../Scripts/components/Vue3BoardHeader.js';
    import { barOption, colorList } from '../Scripts/hooks/chartConfig.js'
    import { exportExcel } from '../Scripts/hooks/useCommonMethod.js'
    const { createApp, reactive, ref, onMounted, watch } = Vue
    const { ElMessage } = ElementPlus
    const { BorderBox10 } = DataV;
    const App = {
      setup() {
        const dataObj = reactive({
          loading: false,
          loadingText: '数据加载中...',
          total: 0,
          queryInfo: {
            factoryid: ''
          },
          factoryList: [],
          dataList: [],
          chartLoadingConfig: { text: '数据查询中...', effect: 'whirling', maskColor: 'transparent', textColor: '#fff' },
          chartHeight: window.innerHeight - 200,
          baseApi: '../handler/board/APSPlanDataChangeRateDashBoard.ashx',
          chartDetail: {
            dialogVisiable: false,
            queryInfo: {
              seriesName: '', deptname: '', title: '',
              currentPage: 1,
              pageSize: 10,
            },
            dataList: [],
            total: 0
          },
          seriesName: '排产工序数',
        })

        // 查询数据
        async function getData() {
        };

        function handleBtnSearch() { }

        async function changeRateChart() {
          const dom = document.getElementById("changeRateChart");
          echarts.dispose(dom);
          let chart = echarts.init(dom);
          chart.showLoading(dataObj.chartLoadingConfig);

          const { data: { data, meta, total } } = await axios.post(`${dataObj.baseApi}?action=getChangeRateData`, {
            type: 'getChangeRateData',
            ...dataObj.queryInfo
          })

          chart.hideLoading();
          if (meta.status == 500) { return ElMessage.error(meta.msg); }
          if (data.length === 0) { return; }

          echarts.dispose(dom);
          chart = echarts.init(dom);

          let arrFactory = [], arrApsqty = [], arrChangeqty = [], arrChangeRate = [];
          for (const i of data) {
            arrFactory.push(i.deptname);
            arrApsqty.push(i.apsqty);
            arrChangeqty.push(i.changeqty);
            arrChangeRate.push(i.changerate);
          }

          let option = barOption({ isLableFormat: true, provideNumber: 4 });
          option.legend.data = ['排产工序数', '计划变更数', '计划变更率'];
          option.xAxis.data = arrFactory;
          option.yAxis[1].axisLabel.formatter = function (data) { return data + "%"; };

          option.series[0] = _.merge(option.series[0], {
            name: '排产工序数',
            data: arrApsqty,
            label: { color: colorList.blue.color },
            itemStyle: { color: { colorStops: colorList.blue.colorStops } }
          });

          option.series[1] = _.merge(_.cloneDeep(option.series[0]), {
            name: '计划变更数',
            data: arrChangeqty,
            label: { color: colorList.green.color },
            itemStyle: { color: { colorStops: colorList.green.colorStops } }
          });

          option.series[2] = _.merge(_.cloneDeep(option.series[0]), {
            name: '计划变更率',
            yAxisIndex: 1,
            data: arrChangeRate,
            label: { color: colorList.red.color, formatter: '{c}%' },
            itemStyle: { color: { colorStops: colorList.red.colorStops } }
          });

          chart.setOption(option);

          chart.on('click', (params) => {
            const { seriesName, name, value } = params;
            if (value == 0) { return; }
            dataObj.seriesName = seriesName;
            dataObj.chartDetail.queryInfo.deptname = name;//单位名称
            dataObj.chartDetail.queryInfo.seriesName = seriesName;//系列名称
            dataObj.chartDetail.queryInfo.currentPage = 1;
            dataObj.chartDetail.queryInfo.title = `${name}--【${seriesName}】明细数据`;
            dataObj.chartDetail.dialogVisiable = true;
            getDetailsData();
          })

          window.addEventListener('resize',
            _.debounce(() => {
              chart.resize();
            }, 200)
          );
        };

        async function getDetailsData() {
          dataObj.loading = true;
          dataObj.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post(`${dataObj.baseApi}?action=getDetailsData`, {
            type: 'getDetailsData',
            ...dataObj.queryInfo,
            ...dataObj.chartDetail.queryInfo
          })
          dataObj.loading = false;
          if (meta.status === 500) { return ElMessage.error(meta.msg); }
          dataObj.chartDetail.dataList = data;
          dataObj.chartDetail.total = total;
        }

        // 明细分页
        function handleDetailCurrentChange(newPage) {
          dataObj.chartDetail.queryInfo.currentPage = newPage;
          getDetailsData();
        };

        // 明细导出
        function exportChartDetailData() {
          const config = {
            url: `${dataObj.baseApi}?actions=exportExcel`,
            data: { type: 'exportDetailsData', ...dataObj.queryInfo, ...dataObj.chartDetail.queryInfo }
          }
          exportExcel(config, dataObj, ElMessage)
        }

        onMounted(() => {
          window.addEventListener('resize', () => {
            dataObj.chartHeight = window.innerHeight - 200;
          });
          changeRateChart();
        })

        watch(() => dataObj.queryInfo, () => {
          dataObj.currentPage = 1;
        }, { deep: true })

        return {
          dataObj,
          getData,
          handleBtnSearch,
          handleDetailCurrentChange,
          exportChartDetailData
        }
      }
    };

    const app = createApp(App);
    app.use(ElementPlus, {
      locale: ElementPlusLocaleZhCn,
      size: 'large'
    });

    // 注册所有icon
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      app.component(key, component)
    }

    app.component('vue3-board-header', Vue3BoardHeader);//注册vue3看板标题组件
    app.component('border-box-10', BorderBox10);//注册datav边框组件

    app.mount('#app');
  </script>
</body>

</html>